<template>
	<view>
		<UniNavBar title="基本资料" rightText="保存" @rightClick="onSave" />
		<view class="wrap">
			<u-form labelPosition="left" labelWidth="80" class="u_form_box" :labelStyle="{ color: '#252525' }"
				:model="formData" ref="uForm">
				<u-form-item label="头像">
					<u-upload @afterRead="onAvatar" :fileList="fileList" name="file" :maxCount="1" :multiple="false"
						width="50" height="50">
						<image v-if="formData.avatar" class="avatar" :src="IMG_URL + formData.avatar"
							style="border-radius:50% ;width: 60rpx;height: 60rpx;" />
						<image v-else src="/static/imgs/tou.png" style="width: 60rpx;height: 60rpx;">
						</image>
					</u-upload>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>


				<u-form-item label="昵称">
					<u-input v-model="formData.username" placeholder="请输入" border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="性别" @click="showSex = true;">
					<u-input v-model="gender" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>

				</u-form-item>
				<u-form-item label="生日" @click="birthdayFlag = true;">
					<u-input v-model="formData.birthday" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="星座" @click="showConstellation = true;">
					<u-input v-model="formData.constellation" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none" @click="showConstellation = true;"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="所在地" @click="cityShow = true;">
					<u-input v-model="formData.location" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>

				</u-form-item>

				<u-form-item label="简介" labelPosition="top">
					<u-textarea v-model="formData.introduction" placeholder="点击这里，填写简介" height="140"
						border="none"></u-textarea>
				</u-form-item>
			</u-form>
		</view>
		<!-- 性别 -->
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
		<!-- 生日 -->
		<u-datetime-picker :show="birthdayFlag" @cancel="() => birthdayFlag = false" @confirm="dateConfirm"
			mode="date"></u-datetime-picker>

		<!-- 星座 -->
		<u-action-sheet :show="showConstellation" :actions="starActions" title="请选择" @close="showConstellation = false"
			@select="constellationSelect">
		</u-action-sheet>
		<!-- 所在地 -->
		<u-picker :show="cityShow" ref="uPicker" :columns="cityList" @confirm="confirm" @change="changeHandler"
			@cancel="cityShow = false"></u-picker>
	</view>
</template>

<script>
import {
	uploadImage
} from "../../api/common.js";
import {
	IMG_URL,
} from "../../config/app.js";
import { updateInfo } from '@/api/my.js'
import UniNavBar from "@/components/uniNavbar/index.vue"
import cityData from '@/utlis/city.js'

import {
	getUserInfo,
} from "../../api/login.js";

export default {
	components: {
		UniNavBar
	},
	data() {
		return {
			IMG_URL: IMG_URL,
			formData: {},
			fileList: [],
			showSex: false,
			birthdayFlag: false,
			showConstellation: false,
			cityShow: false,
			actions: [{
				name: '男',
			}, {
				name: '女'
			}],
			starActions: [{
				name: '白羊座',
			}, {
				name: '金牛座'
			}, {
				name: '双子座'
			}, {
				name: '巨蟹座'
			}, {
				name: '狮子座'
			}, {
				name: '处女座'
			}, {
				name: '天秤座'
			}, {
				name: '天蝎座'
			}, {
				name: '射手座'
			}, {
				name: '摩羯座'
			}, {
				name: '水瓶座'
			}, {
				name: '双鱼座'
			}
			],
			cityList: [],
			cityLevel1: [],
			cityLevel2: [],
			cityLevel3: [],
			gender: ''

		}
	},
	computed: {
	},
	onLoad() {
		this.initCityData();
		this.getData()

	},
	mounted() {
	},
	methods: {
		async onAvatar(e) {
			console.log(e,'获取文件');
			let img = e.file.url;
			console.log(img)
			let res = await uploadImage(img)
			// this.formData.url = res.data.url

			this.formData.avatar = res.data.url
		
		},
		save() {
			console.log('保存')
		},
		//性别选择
		sexSelect(e) {
			console.log(e, '选择')
			this.formData.gender = e.name == '男' ? '1' : '0'
			this.gender = e.name
		},
		constellationSelect(e) {
			this.formData.constellation = e.name
		},
		dateConfirm(val) {
			console.log(val)
			const selectedTime = new Date(val.value);
			const formattedTime = `${selectedTime.getFullYear()}-${(selectedTime.getMonth() + 1).toString().padStart(2, '0')}-${selectedTime.getDate().toString().padStart(2, '0')}`;
			this.formData.birthday = formattedTime
			this.birthdayFlag = false
		},

		initCityData() {
			// 遍历城市js
			cityData.forEach((item1, index1) => {
				let temp2 = [];
				this.cityLevel1.push(item1.provinceName);

				let temp4 = [];
				let temp3 = [];
				// 遍历市
				item1.cities.forEach((item2, index2) => {
					temp2.push(item2.cityName);
					// 遍历区
					item2.counties.forEach((item3, index3) => {
						temp3.push(item3.countyName);
					})
					temp4[index2] = temp3;
					temp3 = [];
				})
				this.cityLevel3[index1] = temp4;

				this.cityLevel2[index1] = temp2;
			})
			// 选择器默认城市
			this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
		},

		// 选中时执行
		changeHandler(e) {
			const {
				columnIndex,
				index,
				indexs,
				value,
				values,
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				picker = this.$refs.uPicker
			} = e;
			if (columnIndex === 0) { // 选择第一列数据时
				// 设置第二列关联数据
				picker.setColumnValues(1, this.cityLevel2[index]);
				// 设置第三列关联数据
				picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
			} else if (columnIndex === 1) { // 选择第二列数据时
				// 设置第三列关联数据
				picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
			}
		},

		// 单击确认按钮时执行
		confirm(e) {
			// 输出数组 [省, 市, 区]
			console.log(e.value);
			const result = e.value.join('/');
			this.formData.location = result

			// 隐藏城市选择器
			this.cityShow = false;
		},


		/**
		 * 保存
		 */
		async onSave() {
			let data = {
				'avatar': this.formData.avatar,
				'username': this.formData.username,
				'gender': this.formData.gender,
				'birthday': this.formData.birthday,
				'constellation': this.formData.constellation,
				'location': this.formData.location,
				'introduction': this.formData.introduction,
			}
			console.log(data, '----------------');
			let res = await updateInfo(data)
			console.log('更新个人信息', res);
			uni.showToast({
				'icon': 'none',
				'title': res.msg,
				'duration': 1500
			})
		},
		/**
		 * 网络请求
		 */
		async getData() {
			let res = await getUserInfo()
			console.log(res, '获取当前用户');
			this.formData = res.data
			this.gender = this.formData.gender == 0 ? '女' : '男';
		}
	}
}
</script>
<style lang="scss">
page {
	background-color: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.wrap {
	background: #fff;
	border-radius: 30rpx;
	padding: 0 30rpx;
	width: 690rpx;
	margin: 24rpx auto 0;

	.u-form-item {
		padding: 12rpx 0;

		/deep/ .u-upload__wrap {
			justify-content: flex-end;
			margin-right: 20rpx;
		}
	}
}
</style>